import React, { Component } from 'react';
// import { Link } from 'react-router-dom';
import '@/components/MusicHall/index/indexMV/Banner.scss'

 class Banner extends Component {
    constructor (props) {
        super(props)
        this.state = {
        }
    }
    goDetail (id) {
      // console.log(this.props)
      this.props.history.push('/MVshow/' + id)
    }
    render () {
      // console.log(this.props)
        return (
          <div className='indexmv-box'>
            <ul className='indexmv-ul'>{
              this.props.list.map((item,index) => {
                // console.log(item)
                return (
                  <li key={item.mv_id}>
                    <div className='indexmv_li'>
                      <div className='cover_box' onClick = { this.goDetail.bind(this, item.mv_id) } >
                        <i className='iconfont icon-videofill'></i>
                      </div>
                      <img className='indexmv_img' src={item.mv_pic_url} alt=""/>
                    </div>                  
                    <div>
                      <h5 onClick = { this.goDetail.bind(this, item.id) }> {item.mv_name} </h5>
                      {/* 跳转到  歌手 所有歌曲 列表 =======未完成*/}
                      <span>{item.singer_name}</span>
                    </div>
                    <p>
                      <i className='iconfont icon-recordlight'></i>
                      {item.play_count}
                    </p>
                  </li>
                )             
              })  
            }</ul>            
          </div>
        )
    }     
 }
 export default Banner


//  <img src={item.mv_pic_url} alt="" onClick = { this.goDetail.bind(this, item.id) }/>                   
//  <div>
//      <h5 onClick = { this.goDetail.bind(this, item.id) }> {item.mv_name} </h5>
//    {/* 跳转到  歌手 所有歌曲 列表 =======未完成*/}
//      <span>{item.singer_name}</span>
//  </div>
//  <p></p>